<!doctype html>
<html>
<head>
	<title>Laptops</title>
	<link href="CSSPositioning5Homework.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="containerWindow">
		<div id="containerLoga">
			<a href="http://www.acer.bg/ac/bg/BG/content/home">Acer</a>
			<a href="http://www.apple.com/bg/">Apple</a>
			<a href="http://www.asus.com/">Asus</a>		
			<a href="http://www.compaq.com/country/bg/bg/">Compaq</a>	
			<a href="http://www.dell.com/">Dell</a>		
			<a href="http://www8.hp.com/bg/bg/home.html">HP</a>		
			<a href="http://www.lenovo.com/bg/en/index.html">Lenovo</a>
			<a href="http://www.samsung.com/bg/consumer/pc-peripherals-printer/notebooks/">Samsung</a>					
			<a href="http://www.sony.bg/hub/vaio-laptopi">Sony</a>				
			<a href="http://www.toshiba.bg/">Toshiba</a>
		</div>
		<div id="containerSixLaptops">
			<div class="containerLaptop">
				<div class="titleColumn">
					<p>Apple MacBook Air</p>
				</div>
				<div class="leftDataColumn">
					<img src="imageLaptop.png" class="laptop"/>
					<p>1300 USD</p>
				</div>
				<div class="rightDataColumn">
					<p>64 GB SSD</p>
					<p>2 GB DDR</p>
					<p>Intel Core i5</p>
				</div>
			</div>	
			<div class="containerLaptop">
				<div class="titleColumn">
					<p>Apple MacBook Air</p>
				</div>
				<div class="leftDataColumn">
					<img src="imageLaptop.png" class="laptop"/>
					<p>1300 USD</p>
				</div>
				<div class="rightDataColumn">
					<p>64 GB SSD</p>
					<p>2 GB DDR</p>
					<p>Intel Core i5</p>
				</div>
			</div>
			<div class="containerLaptop">
				<div class="titleColumn">
					<p>Apple MacBook Air</p>
				</div>
				<div class="leftDataColumn">
					<img src="imageLaptop.png" class="laptop"/>
					<p>1300 USD</p>
				</div>
				<div class="rightDataColumn">
					<p>64 GB SSD</p>
					<p>2 GB DDR</p>
					<p>Intel Core i5</p>
				</div>
			</div>
            <div class="containerLaptop">
				<div class="titleColumn">
					<p>Apple MacBook Air</p>
				</div>
				<div class="leftDataColumn">
					<img src="imageLaptop.png" class="laptop"/>
					<p>1300 USD</p>
				</div>
				<div class="rightDataColumn">
					<p>64 GB SSD</p>
					<p>2 GB DDR</p>
					<p>Intel Core i5</p>
				</div>
			</div>
			<div class="containerLaptop">
				<div class="titleColumn">
					<p>Apple MacBook Air</p>
				</div>
				<div class="leftDataColumn">
					<img src="imageLaptop.png" class="laptop"/>
					<p>1300 USD</p>
				</div>
				<div class="rightDataColumn">
					<p>64 GB SSD</p>
					<p>2 GB DDR</p>
					<p>Intel Core i5</p>
				</div>
			</div>
			<div class="containerLaptop">
				<div class="titleColumn">
					<p>Apple MacBook Air</p>
				</div>
				<div class="leftDataColumn">
					<img src="imageLaptop.png" class="laptop"/>
					<p>1300 USD</p>
				</div>
				<div class="rightDataColumn">
					<p>64 GB SSD</p>
					<p>2 GB DDR</p>
					<p>Intel Core i5</p>
				</div>
			</div>                                                						
        </div>
		<div id="containerRange">
			<div>
				<label class="rangeLeft" for="range1">Min price:</label>
				<label class="rangeRight" for="range1">500 USD</label>
				<input type="range" id="range1"/>
			</div>
			<div>
				<label class="rangeLeft" for="range2">Max price:</label>
				<label class="rangeRight" for="range2">1500 USD</label>
				<input type="range" id="range2"/>
			</div>
			<div>
				<label class="rangeLeft" for="range3">Min RAM:</label>
				<label class="rangeCenterPlusMargin" for="range3">4 GB</label>
				<input type="range" id="range3"/>
			</div>
			<div>
				<label class="rangeLeft" for="range4">Max RAM:</label>
				<label class="rangeCenter" for="range4">16GB</label>
				<input type="range" id="range4"/>
			</div>
		</div>
	</div>
</body>
</html>